<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      .one{
         perspective: 500px;
         width: 300px;
         height: 300px;
         margin: 100px auto;
         /* overflow: hidden; */
         position: relative;
         /* 开启立体空间 默认不开启-添加在父元素中。 */
         transform-style: preserve-3d;
         transition: all 1s;
      }
/* 
       .two img {
         position: absolute;
         display: block;
         width: 200px;
         height: 200px;
         transition: all 1s;
         transform-style: preserve-3d;

      } */

      /* .two img:hover {
         transform:rotatex(60deg); 
         transform: rotatey(60deg)rotateZ(60deg) 
         transform: rotateZ(60deg); 
          这时旋转轴成自动矢量确定 
         ransform: rotate3d(1, 1, 1, 60deg);
      } */
      .one:hover{
         transform: rotatey(60deg);
      }
      .two{
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: #0000ff;
      }
      .thr{
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: greenyellow;
         transform: rotatex(90deg);
         /* transform-style: preserve-3d; */

      }
   </style>
</head>

<body>
   <div class="one">
      <div class="two">
         <!-- <img src="imgaes/pic.jpg" alt=""> -->
         </div>
      <div class="thr"></div>
      </div>

</body>

</html>